<template>
  <div>
    <h3>你的购物车</h3>
    <p v-show="!cartProFilter.length">
      <i>购物车空荡荡的，去买点什么吧</i>
    </p>
    <ul>
      <li v-for="product in cartProFilter" :key="product.id">
        {{ product.title }} - {{ product.price | priceReg }} x {{ product.quantity }}
        <button :disabled="!product.quantity" @click="remove(product)">-</button>
        <button :disabled="!product.inventory" @click="addProToCart(product)">+</button>
      </li>
    </ul>
    <p>总价: {{ cartTotalPrice | priceReg }}</p>
    <p>
      <button :disabled="!cartProFilter.length" @click="checkout(cartProFilter)">结算</button>
    </p>
    <p v-show="checkoutStatus">结算状态 {{ checkoutStatus }}。</p>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState("spc", ["checkoutStatus"]),
    ...mapGetters("spc", ["cartProFilter", "cartTotalPrice"])
  },
  methods: {
    ...mapActions("spc", ["checkout", "remove", "addProToCart"])
  }
};
</script>

<style>
</style>
